<template>
	<view>
		<view class="main">
			<input class="usercss" v-model="phone" @input="getPhone" placeholder="手机号" placeholder-class="plcss" />
			<view class="codecss flex">
				<input placeholder="请输入验证码" v-model="code" placeholder-class="plcss" @input="getValue" />
				<button class="button" :disabled="show" :style="{color:color}" @tap="getCode">{{codeValue}}</button>
			</view>
			<button class="buttoncss" @tap="Check">登录</button>
		</view>
	</view>
</template>

<script>
	import api from "@/common/api.js";
	import {
		baseURL
	} from "@/common/http.js";
	export default {
		data() {
			return {
				codeValue: "获取验证码",
				color: "#209FFC",
				time: 60,
				phone: '',
				show: false,
				code: '',
				userid: '',
				login: false
			};
		},
		methods: {
			getPhone(e) {
				this.phone = e.detail.value
			},
			getValue(e) {
				this.code = e.detail.value
			},
			Check() {
				if(this.phone != '' && (/^1[3|4|5|7|8|9][0-9]\d{8}$/.test(this.phone))) {
					if (!this.login) {
						console.log(this.userid, 'ID')
						api.look({
							call: this.phone,
							yan: this.code,
							api: 'smsyanzhen',
							id: this.userid
						}).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: '绑定成功',
									icon: 'success',
									duration: 2000,
									success: () => {
										uni.setStorage({
											key: 'message',
											data: res.date,
											success: () => {
												setTimeout(() => {
													uni.reLaunch({
														url: "../index/index"
													})
												}, 2000)
											}
										})
									}
								})
							} else if (res.code == 404) {
								uni.showToast({
									title: "该手机号已被绑定",
									icon: 'none',
									duration: 2000
								})
							}
						}).catch(err => {
							console.log(err)
						})
					} else {
						api.look({
							call: this.phone,
							yan: this.code,
							api: 'smsyan'
						}).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: '登录成功',
									icon: 'success',
									duration: 2000,
									success: () => {
										uni.setStorage({
											key: 'message',
											data: res.date,
											success: () => {
												setTimeout(() => {
													uni.navigateTo({
														url: "../index/index"
													})
												}, 2000)
											}
										})
									}
								})
							} else if (res.code == 403) {
								uni.showToast({
									title: res.datef,
									icon: 'none',
									duration: 2000
								})
							}
						}).catch(err => {
							console.log(err)
						})
					}
				} else {
					uni.showToast({
						title: '请输入正确的手机号和验证码',
						icon: 'none',
						duration: 1500
					})
				}
			},
			//点击获取验证码
			getCode(e) {
				var that = this;
				if (that.phone == "" && !(/^1[3|4|5|7|8|9][0-9]\d{8}$/.test(that.phone))) {
					uni.showToast({
						title: '请输入正确的手机号',
						duration: 2000,
						icon: 'none',
					})
					return;
				}
				let data = {}
				if (!this.login) {
					data = {
						call: that.phone,
						api: 'sms',
						pid: 1
					}
				} else {
					data = {
						call: that.phone,
						api: 'sms'
					}
				}
				api.look(data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '发送成功',
							icon: 'success',
							duration: 2000
						})
						// 60秒后重新获取验证码
						var inter = setInterval(function() {
							that.codeValue = that.time + 's后重发'
							that.time = that.time - 1
							that.color = "#E2E2E2"
							that.show = true
							if (that.time < 1) {
								clearInterval(inter)
								that.codeValue = '重新发送'
								that.time = 60
								that.color = "#2878FF"
								that.show = false
							}
						}.bind(this), 1000);
					} else {
						uni.showToast({ 
							// title: '发送失败',
							title: res.datef,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			onShareAppMessage(options) {
				let shareObj = {
					success: (res) => {
						if (res.errMsg == 'shareAppMessage:ok') {
							uni.showToast({
								title: '分享成功',
								icon: 'success',
								duration: 1500
							})
						}
					},
					fail: () => {
						if (res.errMsg == 'shareAppMessage:fail cancel') {
							uni.showToast({
								title: '取消分享',
								icon: 'none',
								duration: 2000
							})
						} else if (res.errMsg == 'shareAppMessage:fail') {
							// 转发失败，其中 detail message 为详细失败信息
						}
					},
					complete: () => {
						// 转发结束之后的回调（转发成不成功都会执行）
					}
				}
			},
			onLoad(query) {
				if (query.id) {
					this.userid = query.id
				}
				if (query.login) {
					this.login = JSON.parse(query.login)
				}
				if (query.bindCode && query.id) {
					this.userid = query.id
					console.log(this.userid, 'ID')
					uni.setNavigationBarTitle({
						title: '绑定手机号'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.main {
		width: 690rpx;
		margin: 0 auto;

		.usercss {
			margin-top: 30rpx;
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 1rpx solid #999;
		}

		.plcss {
			font-size: 30rpx;
			color: #999;
			padding-left: 20rpx;
		}

		.codecss {
			margin-top: 30rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			border-bottom: 1rpx solid #999;

			input {
				width: 540rpx;
			}

			.button {
				width: 250rpx;
				height: 98rpx;
				line-height: 98rpx;
				background: #fff;
				font-size: 32rpx;
			}

			button::after {
				border: none;
			}
		}

		.buttoncss {
			width: 690rpx;
			height: 100rpx;
			background: #209FFC;
			border-radius: 50rpx;
			color: #fff;
			line-height: 100rpx;
			text-align: center;
			font-size: 40rpx;
			margin-top: 150rpx;
		}
	}
</style>
